<template>
	<view class="info">
		<view class="uni-padding-wrap">
			<view class="uni-form-item uni-column uni-inline-item">
				<label class="title">身份证号</label>
				<input @change="idcardChange" style="text-align: right;" class="uni-input" v-model.trim="form.idcard" placeholder="请输入身份证号" />
			</view>
		</view>
		<view class="uni-padding-wrap idcard">
			<view class="label">请拍摄或上传你有效的身份证</view>
			<view class="uni-flex uni-row">
				<view class="flex-item idcard_p" @click="chooseSharePic">
					<img :src="form.idcard_p ? form.idcard_p : 'http://qiniu.landwater.com.cn/idcard_p.jpg'" />
					<button>上传身份证正面</button>
				</view>
				<view class="flex-item idcard_n" @click="chooseSharePicN">
					<img :src="form.idcard_n ? form.idcard_n : 'http://qiniu.landwater.com.cn/idcard_n.jpg'" />
					<button>上传身份证反面</button>
				</view>
			</view>
		</view>
		<view class="blank"></view>
		<view class="uni-padding-wrap">
			<view class="label">请确认您的身份信息:</view>

			<form :data="form">
				<view class="uni-form-item uni-column uni-inline-item">
					<label class="title">姓名</label>
					<input style="text-align: right;" class="uni-input" v-model.trim="form.name" placeholder="请输入姓名" />
				</view>
				<view class="uni-form-item uni-column uni-inline-item">
					<label class="title">手机号</label>
					<input style="text-align: right;" class="uni-input" v-model.trim="form.phone" placeholder="请输入手机号" />
				</view>
				<view class="uni-form-item uni-column uni-inline-item">
					<label class="title">备注</label>
					<input style="text-align: right;" class="uni-input" v-model.trim="form.remark" placeholder="请输入备注信息" />
				</view>
			</form>
		</view>
		<view class="blank"></view>
		<view class="uni-padding-wrap">
			<view class="label">请确认您的银行卡信息:</view>

			<form :data="form">
				<view class="uni-form-item uni-column uni-inline-item">
					<label class="title">开户行</label>
					<input style="text-align: right;" class="uni-input" v-model.trim="form.open_bank" placeholder="请输入开户行" />
				</view>
				<view class="uni-form-item uni-column uni-inline-item">
					<label class="title">银行卡</label>
					<input style="text-align: right;" class="uni-input" v-model.trim="form.bank" placeholder="请输入银行卡号" />
				</view>
				<view class="flex-item bank_thumb" @click="chooseSharePicBank">
					<img :src="form.bank_thumb ? form.bank_thumb : 'http://qiniu.landwater.com.cn/bank_thumb.jpg'" />
					<button>上传银行卡照片</button>
				</view>
			</form>
		</view>
		<view class="blank"></view>
		<view class="uni-padding-wrap">
			<view class="uni-form-item uni-column">
				<radio-group v-model="radio" @change="RadioboxChange" @click="openup">
					<label>
						<radio label="1" />
						<text>
							请认真阅读信息以及
							<font>《合同》</font>
						</text>
					</label>
				</radio-group>
			</view>

			<view class="uni-btn-v"><button class="submit" type="primary" @click="submit">提交</button></view>
		</view>

		<view>
			<uni-popup class="article-container" ref="popup" type="bottom"><view class="article" v-html="article.content"></view></uni-popup>
		</view>
	</view>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import { get, post, showToast } from '@/static/utils/index';
import { uploadFile } from '@/static/utils/index';
export default {
	data() {
		return {
			tempFilePath: '',
			savedFilePath: '',
			form: {
				idcard_p: '',
				idcard_n: '',
				id: this.$route.query.id,
				name: '',
				idcard: '',
				phone: '',
				bank: '',
				open_bank: '',
				bank_thumb: '',
				remark: ''
			},
			radio: 0,
			article: {
				content: ''
			}
		};
	},
	onLoad() {},
	created() {
		this.getArticle();
	},
	methods: {
		RadioboxChange: function(e) {
			//单选选中
			//e中可以找到你想要的信息
			this.radio = 1;
		},
		openup() {
			this.$refs.popup.open('top');
		},
		getArticle() {
			this.$store.dispatch('getArticle', Object.assign({})).then(res => {
				if (res.code == 200) {
					this.article.content = res.data.content;
				}
			});
		},

		//提交
		submit() {
			let formData = this.form;
			if (!formData.idcard_p) {
				showToast('请上传身份证正面');
				return;
			}
			if (!formData.idcard_n) {
				showToast('请上传身份证反面');
				return;
			}
			if (!formData.name) {
				showToast('请填写姓名');
				return;
			}
			if (!formData.idcard) {
				showToast('请填写身份证号');
				return;
			}
			if (!formData.phone) {
				showToast('请填写手机号');
				return;
			}
			if (!formData.open_bank) {
				showToast('请填写银行卡开户行');
				return;
			}
			if (!formData.bank) {
				showToast('请填写银行卡号');
				return;
			}
			if (!formData.bank_thumb) {
				showToast('请上传银行卡照片');
				return;
			}
			if (!this.radio) {
				showToast('请详细阅读个人信息，并勾选');
				return;
			}
			this.$store.dispatch('setInfo', Object.assign({}, formData)).then(res => {
				if (res.code == 200) {
					showToast('信息提交成功');
				}
			});
		},

		//身份证正面上传
		chooseSharePic() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: res => {
					let tempPath = res.tempFilePaths[0];
					let tempFile = res.tempFiles[0];
					//上传文件
					uploadFile(tempPath, { ext: 'p' }).then(res => {
						this.form.idcard_p = res.data.src;
					});
				}
			});
		},
		//身份证反面上传
		chooseSharePicN() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: res => {
					let tempPath = res.tempFilePaths[0];
					let tempFile = res.tempFiles[0];

					//上传文件
					uploadFile(tempPath, { ext: 'n' }).then(res => {
						this.form.idcard_n = res.data.src;
					});
				}
			});
		},
		//银行卡照片
		chooseSharePicBank() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: res => {
					let tempPath = res.tempFilePaths[0];
					let tempFile = res.tempFiles[0];
					//上传文件
					uploadFile(tempPath, { ext: 'n' }).then(res => {
						this.form.bank_thumb = res.data.src;
					});
				}
			});
		},
		idcardChange() {
			this.$store.dispatch('getInfo', Object.assign({}, { idcard: this.form.idcard,id:this.form.id })).then(res => {
				if (res.code == 200) {
					this.form.idcard_p = this.form.idcard_p ? this.form.idcard_p : res.data.idcard_p;
					this.form.idcard_n = this.form.idcard_n ? this.form.idcard_n : res.data.idcard_n;
					this.form.name = this.form.name ? this.form.name : res.data.name;
					this.form.phone = this.form.phone ? this.form.phone : res.data.phone;
					this.form.remark = this.form.remark ? this.form.remark : res.data.remark;
					this.form.bank = this.form.bank ? this.form.bank : res.data.bank;
					this.form.bank_thumb = this.form.bank_thumb ? this.form.bank_thumb : res.data.bank_thumb;
					this.form.open_bank = this.form.open_bank ? this.form.open_bank : res.data.open_bank;
				}
			});
		}
	}
};
</script>

<style>
.info {
	min-height: 100vh;
	background-color: #ffffff;
}
.label {
	padding-top: 20upx;
	margin-bottom: 20upx;
	font-size: 32upx;
	color: #9c9c9c;
}
.flex-item {
	margin: 10upx;
	width: 50%;
	text-align: center;
	border-radius: 20upx 20upx 0 0;
	overflow: hidden;
	padding-bottom: 20upx;
	cursor: pointer;
}
.idcard_p img,
.idcard_n img,
.bank_thumb img {
	width: 100%;
	height: 100px;
	height: unset;
}
font {
	color: #0066cc;
}
.idcard_p button,
.idcard_n button,
.bank_thumb button {
	background: #5881ff;
	color: #ffffff;
	border-radius: 0 0 20upx 20upx;
	margin-top: -16upx;
	font-size: 32upx;
}
.submit {
	background-color: #5881ff;
}

.flex-item-V {
	width: 100%;
	text-align: center;
	height: 100upx;
}
.blank {
	height: 20upx;
	background-color: #f4f7fe;
}
.uni-form-item {
	border-bottom: 1px solid #ececec;
}
label {
	display: inline;
	vertical-align: middle;
}
.article-container{
	
}
.article {
	background-color: #ffffff;
	padding: 20upx;
	max-height: 50vh;
	overflow-y: scroll !important;
}
</style>
